<template>
  <div>
    <el-table :data="list"  fit highlight-current-row style="width: 100%">
      <el-table-column
        v-loading="loading"
        align="center"
        label="活动ID"
        width="180"
        element-loading-text="请给我点时间！"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.activityId }}</span>
        </template>
      </el-table-column>

      <el-table-column width="185px" align="center" label="活动名称">
        <template slot-scope="scope">
          <span>{{ scope.row.title}}</span>
        </template>
      </el-table-column>

      <el-table-column width="110px" align="center" label="活动渠道">
        <template slot-scope="scope">
          <span>{{ scope.row.channelCodes}}</span>
        </template>
      </el-table-column>

      <el-table-column width="360px" align="center" label="活动时间">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }} 至 {{ scope.row.endTime }}</span>
        </template>
      </el-table-column>

      <el-table-column width="110px" align="center" label="活动类型">
        <template slot-scope="scope">
          <span>{{ scope.row.frontPromotionType}}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" align="center" label="活动状态" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" align="center" label="创建人" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.createUsername }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" align="center" label="创建时间" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" align="center" label="操作" width="290">
        <template slot-scope="scope">
          <span v-if="scope.row.type =='1'">
            <el-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</el-button>
            <el-button type="text" class="textButton" @click="copyBtnShow(scope.row)">复制</el-button>
            <el-button type="text" class="textButton" @click="closeActivity(scope.row)">关闭</el-button>
            <!--<el-button type="text" class="textButton" @click="appendMerchantProduct(scope.row)">抽奖干预</el-button>-->
            <el-button type="text" class="textButton" @click="showLotteryLink(scope.row)">抽奖链接</el-button>
            <el-tooltip class="item" effect="dark" content="复制此活动链接或将其设置到页面上，都可活动推送给他们啦~" placement="left">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <span v-else-if="scope.row.type =='2' || scope.row.type =='3' ">
            <el-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</el-button>
            <el-button type="text" class="textButton" @click="copyBtnShow(scope.row)">复制</el-button>
            <el-button type="text" class="textButton" @click="showLotteryLink(scope.row)">抽奖链接</el-button>
            <el-tooltip class="item" effect="dark" content="复制此活动链接或将其设置到页面上，都可活动推送给他们啦~" placement="left">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <span v-else-if="scope.row.type =='5'">
            <el-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</el-button>
            <el-button type="text" class="textButton" @click="copyBtnShow(scope.row)">复制</el-button>
            <el-button type="text" class="textButton" @click="updateBtnShow(scope.row)">编辑</el-button>
            <el-button type="text" class="textButton" @click="deleteBtnShow(scope.row)">删除</el-button>
            <el-button type="text" class="textButton" @click="showLotteryLink(scope.row)">抽奖链接</el-button>
            <el-tooltip class="item" effect="dark" content="复制此活动链接或将其设置到页面上，都可活动推送给他们啦~" placement="left">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="抽奖链接"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form
        :model="dataForm"
        label-width="80px"
        ref="dataForm"
      >
      <el-tooltip placement="top">
            <div slot="content">点击复制</div>
             <span style="display:block;cursor:pointer;width:100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
              class="tag-read" :data-clipboard-text="dataForm.lotteryLink" v-clipboard:success="copy" @click="copy">{{dataForm.lotteryLink}}</span>
      </el-tooltip>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
// import { fetchList } from '@/api/article'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    type: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      dialogVisible:false,
      list: [],
      tableList:{status0:[{"activityId":1912230007543852,"title":"150一次抽奖","promType":3,"frontPromotionType":"抽奖","startTime":"2019-12-22 15:43:18","endTime":"2019-12-28 15:43:20","status":"进行中","remark":null,"createUsername":"merchant","createUserid":1909160000172983,"createTime":"	2019-12-23 15:44:30","isDeleted":0,"companyId":276,"createMerchantId":null,"createMerchantName":null,"activityType":1,"merchantType":1,"promPlatform":11,"payType":null,"canCreateActivity":1,"ruleDesc":null,"scopeType":null,"channelCodes":"BBC","hasWriteRoll":true,"type":1},{"activityId":1912250007154571,"title":"3积分的活动","promType":3,"frontPromotionType":"抽奖","startTime":"2019-12-24 14:39:06","endTime":"2019-12-26 14:39:08","status":"已过期","remark":null,"createUsername":"merchant","createUserid":1909160000172983,"createTime":"2019-12-25 14:40:02","isDeleted":0,"companyId":276,"createMerchantId":null,"createMerchantName":null,"activityType":1,"merchantType":1,"promPlatform":11,"payType":null,"canCreateActivity":1,"ruleDesc":null,"scopeType":null,"channelCodes":"BBC","hasWriteRoll":true,"type":2},{"activityId":1912190010211929,"title":"测试积分消耗","promType":3,"frontPromotionType":"抽奖","startTime":"2019-12-18 21:38:48","endTime":" 2019-12-20 21:38:51","status":"已过期","remark":null,"createUsername":"merchant","createUserid":1909160000172983,"createTime":"2019-12-19 21:39:56","isDeleted":0,"companyId":276,"createMerchantId":null,"createMerchantName":null,"activityType":1,"merchantType":1,"promPlatform":11,"payType":null,"canCreateActivity":1,"ruleDesc":null,"scopeType":null,"channelCodes":"BBC","hasWriteRoll":true,"type":2},{"activityId":1910100000098799,"title":"验证","promType":3,"frontPromotionType":"抽奖","startTime":"2019-12-16 15:28:53","endTime":" 2019-12-19 15:28:55","status":"已过期","remark":null,"createUsername":"merchant","createUserid":1909160000172983,"createTime":"2019-12-16 15:29:52","isDeleted":0,"companyId":276,"createMerchantId":null,"createMerchantName":null,"activityType":1,"merchantType":1,"promPlatform":11,"payType":null,"canCreateActivity":1,"ruleDesc":null,"scopeType":null,"channelCodes":"BBC","hasWriteRoll":true,"type":2},{"activityId":1912050005637944,"title":"大转盘","promType":3,"frontPromotionType":"抽奖","startTime":"2019-12-04 11:28:52","endTime":" 2019-12-06 11:28:54","status":"已关闭","remark":null,"createUsername":"merchant","createUserid":1909160000172983,"createTime":"2019-12-05 11:30:34","isDeleted":0,"companyId":276,"createMerchantId":null,"createMerchantName":null,"activityType":1,"merchantType":1,"promPlatform":11,"payType":null,"canCreateActivity":1,"ruleDesc":null,"scopeType":null,"channelCodes":"BBC","hasWriteRoll":true,"type":3},{"activityId":1911290007441546,"title":"测试","promType":3,"frontPromotionType":"抽奖","startTime":"2019-11-28 16:31:02","endTime":"2019-11-30 16:31:04","status":"已关闭","remark":null,"createUsername":"superadmin","createUserid":19090215374897,"createTime":"2019-11-29 15:08:22","isDeleted":0,"companyId":276,"createMerchantId":null,"createMerchantName":null,"activityType":1,"merchantType":1,"promPlatform":0,"payType":null,"canCreateActivity":1,"ruleDesc":null,"scopeType":null,"channelCodes":"BBC","hasWriteRoll":true,"type":3},{"activityId":1911280008259922,"title":"抽大奖","promType":3,"frontPromotionType":"抽奖","startTime":"2019-11-28 16:50:56","endTime":"2019-11-30 16:50:58","status":"已关闭","remark":null,"createUsername":"superadmin","createUserid":19090215374897,"createTime":"2019-11-28 16:52:04","isDeleted":0,"companyId":276,"createMerchantId":null,"createMerchantName":null,"activityType":1,"merchantType":1,"promPlatform":0,"payType":null,"canCreateActivity":1,"ruleDesc":null,"scopeType":null,"channelCodes":"BBC","hasWriteRoll":true,"type":5}],
        status1:[{"activityId":1912230007543852,"title":"150一次抽奖","promType":3,"frontPromotionType":"抽奖","startTime":"2019-12-22 15:43:18","endTime":"2019-12-28 15:43:20","status":"进行中","remark":null,"createUsername":"merchant","createUserid":1909160000172983,"createTime":"	2019-12-23 15:44:30","isDeleted":0,"companyId":276,"createMerchantId":null,"createMerchantName":null,"activityType":1,"merchantType":1,"promPlatform":11,"payType":null,"canCreateActivity":1,"ruleDesc":null,"scopeType":null,"channelCodes":"BBC","hasWriteRoll":true,"type":1}],
        status2:[{"activityId":1912250007154571,"title":"3积分的活动","promType":3,"frontPromotionType":"抽奖","startTime":"2019-12-24 14:39:06","endTime":"2019-12-26 14:39:08","status":"已过期","remark":null,"createUsername":"merchant","createUserid":1909160000172983,"createTime":"2019-12-25 14:40:02","isDeleted":0,"companyId":276,"createMerchantId":null,"createMerchantName":null,"activityType":1,"merchantType":1,"promPlatform":11,"payType":null,"canCreateActivity":1,"ruleDesc":null,"scopeType":null,"channelCodes":"BBC","hasWriteRoll":true,"type":2},{"activityId":1912190010211929,"title":"测试积分消耗","promType":3,"frontPromotionType":"抽奖","startTime":"2019-12-18 21:38:48","endTime":" 2019-12-20 21:38:51","status":"已过期","remark":null,"createUsername":"merchant","createUserid":1909160000172983,"createTime":"2019-12-19 21:39:56","isDeleted":0,"companyId":276,"createMerchantId":null,"createMerchantName":null,"activityType":1,"merchantType":1,"promPlatform":11,"payType":null,"canCreateActivity":1,"ruleDesc":null,"scopeType":null,"channelCodes":"BBC","hasWriteRoll":true,"type":2},{"activityId":1910100000098799,"title":"验证","promType":3,"frontPromotionType":"抽奖","startTime":"2019-12-16 15:28:53","endTime":" 2019-12-19 15:28:55","status":"已过期","remark":null,"createUsername":"merchant","createUserid":1909160000172983,"createTime":"2019-12-16 15:29:52","isDeleted":0,"companyId":276,"createMerchantId":null,"createMerchantName":null,"activityType":1,"merchantType":1,"promPlatform":11,"payType":null,"canCreateActivity":1,"ruleDesc":null,"scopeType":null,"channelCodes":"BBC","hasWriteRoll":true,"type":2}],
        status3:[{"activityId":1912050005637944,"title":"大转盘","promType":3,"frontPromotionType":"抽奖","startTime":"2019-12-04 11:28:52","endTime":" 2019-12-06 11:28:54","status":"已关闭","remark":null,"createUsername":"merchant","createUserid":1909160000172983,"createTime":"2019-12-05 11:30:34","isDeleted":0,"companyId":276,"createMerchantId":null,"createMerchantName":null,"activityType":1,"merchantType":1,"promPlatform":11,"payType":null,"canCreateActivity":1,"ruleDesc":null,"scopeType":null,"channelCodes":"BBC","hasWriteRoll":true,"type":3},{"activityId":1911290007441546,"title":"测试","promType":3,"frontPromotionType":"抽奖","startTime":"2019-11-28 16:31:02","endTime":"2019-11-30 16:31:04","status":"已关闭","remark":null,"createUsername":"superadmin","createUserid":19090215374897,"createTime":"2019-11-29 15:08:22","isDeleted":0,"companyId":276,"createMerchantId":null,"createMerchantName":null,"activityType":1,"merchantType":1,"promPlatform":0,"payType":null,"canCreateActivity":1,"ruleDesc":null,"scopeType":null,"channelCodes":"BBC","hasWriteRoll":true,"type":3},{"activityId":1911280008259922,"title":"抽大奖","promType":3,"frontPromotionType":"抽奖","startTime":"2019-11-28 16:50:56","endTime":"2019-11-30 16:50:58","status":"已关闭","remark":null,"createUsername":"superadmin","createUserid":19090215374897,"createTime":"2019-11-28 16:52:04","isDeleted":0,"companyId":276,"createMerchantId":null,"createMerchantName":null,"activityType":1,"merchantType":1,"promPlatform":0,"payType":null,"canCreateActivity":1,"ruleDesc":null,"scopeType":null,"channelCodes":"BBC","hasWriteRoll":true,"type":3}],
        status5:[],
        },

      listQuery: {
        page: 1,
        limit: 5,
        type: this.type,
        sort: '+id'
      },
      loading: false,
      dataForm:{}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.$emit('create') // for test
      // fetchList(this.listQuery).then(response => {
        var key = 'status'+this.listQuery.type;
        this.list = this.tableList[key];
        this.loading = false
      // })
    },
    handleClose(done) {
      done();
    },
    //查看
    seeNewTab: function(data) {
      this.$router.push("/QueryPromotion");
    },
    //复制
    copyBtnShow: function(data) {
      this.$confirm("是否确认复制该活动？", "提示", {
        type: "warning",
        closeOnClickModal: false,
        })
        .then(() => {
          this.$message({message: "复制成功", type: "success"});
        })
        .catch(() => {
        });

    },
    //关闭
    closeActivity: function(data) {
      this.$confirm("是否确认关闭活动？", "提示", {
        type: "warning",
        closeOnClickModal: false,
        })
        .then(() => {
          this.$message({message: "活动已关闭 ", type: "success"});
        })
        .catch(() => {
        });

    },
    deleteActivity: function(data) {
      this.$confirm("是否确认删除活动？", "提示", {
        type: "warning",
        closeOnClickModal: false,
        })
        .then(() => {
          this.$message({message: "删除成功 ", type: "success"});
        })
        .catch(() => {
        });

    },
    updateBtnShow: function(rows) {
      this.$router.push({
        name: "编辑抽奖活动",
        params: {data: rows}
      });
    },
    //追加商品
    appendMerchantProduct: function(data) {

    },
    //查看营销报告
    viewMarketingReport: function(data) {
      this.$router.push("/MarketingReport");
    },
    //抽奖链接
    showLotteryLink: function(data) {
      this.dataForm = data;
      this.dataForm.lotteryLink =this.utils.host+data.activityId;
      this.dialogVisible = true;
    },
    //复制函数
    copy() {
      var clipboard = new this.Clipboard('.tag-read');
      clipboard.on('success', e => {
           
          this.$message({message: "复制成功",type: "success"});
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          this.$message({message: "该浏览器不支持自动复制",type: "error"});
           
          // 释放内存
          clipboard.destroy()
        })
    },

  }
}
</script>
<style scoped>
  .textButton {
    margin-left: 1px;
  }
</style>

